<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>画布裁剪与贴入图片</title>
</head>

<body>
    <img src="https://img0.baidu.com/it/u=1856123620,3576811447&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333" width="300px">
    <canvas id="canvas" width="500px" height="333px" style="border: 3px solid blue;"></canvas>

    <script>
        var canvas = document.getElementById("canvas"); // 获取画布
        var context = canvas.getContext('2d'); // 准备画笔
        var img = new Image(); // 实例化对象，创建一个图片对象
        img.src = "https://img0.baidu.com/it/u=1856123620,3576811447&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333";
        img.onload = function() {
            // 前四个参数是截取的位置及大小， 后四个参数是放入的位置及大小
            context.drawImage(img, 200, 0, 300, 233, 0, 0, 300, 233)
        }
    </script>
</body>

</html>